<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能设备控制中心 - {{ room }}设备</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #f8f9fa;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        .sidebar {
            height: 100vh;
            width: 250px;
            position: fixed;
            top: 0;
            left: 0;
            background-color: #343a40;
            padding-top: 20px;
            transition: all 0.3s ease;
        }
        .sidebar a {
            padding: 10px 15px;
            text-decoration: none;
            font-size: 18px;
            color: #adb5bd;
            display: block;
            transition: all 0.3s ease;
        }
        .sidebar a:hover {
            color: #ffffff;
            background-color: #495057;
        }
        .sidebar a.active {
            color: #ffffff;
            background-color: #007bff;
        }
        .content {
            margin-left: 250px;
            padding: 20px;
        }
        .device-card {
            margin-bottom: 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .device-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .device-status {
            font-size: 16px;
            font-weight: bold;
        }
        .device-icon {
            font-size: 48px;
            margin-bottom: 10px;
        }
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 34px;
        }
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 34px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 26px;
            width: 26px;
            left: 4px;
            bottom: 4px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #28a745;
        }
        input:focus + .slider {
            box-shadow: 0 0 1px #28a745;
        }
        input:checked + .slider:before {
            transform: translateX(26px);
        }
        .room-header {
            margin-bottom: 30px;
            text-align: center;
            padding-bottom: 15px;
            border-bottom: 2px solid #007bff;
        }
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }
            .content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <a href="/" class="text-center mb-4"><i class="fas fa-home mr-2"></i>智能家居中心</a>
        <a href="/" class="mb-2"><i class="fas fa-tachometer-alt mr-2"></i>仪表盘</a>
        <a href="/devices" class="mb-2"><i class="fas fa-lightbulb mr-2"></i>设备控制</a>
        <a href="/scenes" class="mb-2"><i class="fas fa-film mr-2"></i>场景管理</a>
        <a href="/schedules" class="mb-2"><i class="fas fa-calendar-alt mr-2"></i>定时任务</a>
        <a href="/analytics" class="mb-2"><i class="fas fa-chart-bar mr-2"></i>数据分析</a>
        
        <div class="mt-5 px-3">
            <h5 class="text-light mb-2">房间列表</h5>
            <hr class="bg-secondary">
            {% for room in ['客厅', '卧室', '厨房'] %}
            <a href="/rooms/{{ room }}" class="mb-1 small">
                <i class="fas fa-door-open mr-2"></i>{{ room }}
            </a>
            {% endfor %}
        </div>
    </div>

    <div class="content">
        <div class="room-header">
            <h1><i class="fas fa-door-open mr-2"></i>{{ room }}设备</h1>
            <p class="text-muted">控制和监控{{ room }}内的所有智能设备</p>
        </div>

        <div class="container">
            <div class="row">
                {% if devices|length > 0 %}
                    {% for device in devices %}
                    <div class="col-md-4 col-sm-6">
                        <div class="card device-card bg-white rounded-lg p-4">
                            <div class="text-center">
                                <div class="device-icon text-primary mb-3">
                                    <i class="fas fa-{{ device.icon }}"></i>
                                </div>
                                <h3 class="card-title mb-2">{{ device.name }}</h3>
                                <p class="text-muted mb-4">位置: {{ device.room }}</p>
                                
                                <div class="mb-4">
                                    <label class="toggle-switch">
                                        <input type="checkbox" id="device-{{ device.id }}" class="device-toggle" data-device-id="{{ device.id }}"
                                            {% if system_status.relays[device.id-1] %}checked{% endif %}>
                                        <span class="slider"></span>
                                    </label>
                                </div>
                                
                                <div class="device-status mt-2">
                                    {% if system_status.relays[device.id-1] %}
                                        <span class="text-success">
                                            <i class="fas fa-circle mr-1"></i>已开启
                                        </span>
                                    {% else %}
                                        <span class="text-secondary">
                                            <i class="fas fa-circle mr-1"></i>已关闭
                                        </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                {% else %}
                    <div class="col-12 text-center">
                        <div class="alert alert-info mt-5">
                            <i class="fas fa-info-circle mr-2"></i>
                            当前房间没有已配置的设备
                        </div>
                    </div>
                {% endif %}
            </div>

            <div class="mt-5 text-center">
                <a href="/devices" class="btn btn-primary">
                    <i class="fas fa-arrow-left mr-2"></i>返回设备列表
                </a>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 设备开关控制
        $('.device-toggle').change(function() {
            const deviceId = $(this).data('device-id');
            const state = $(this).prop('checked');
            const statusElement = $(this).closest('.device-card').find('.device-status span');
            
            // 显示加载状态
            statusElement.html('<i class="fas fa-spinner fa-spin mr-1"></i>处理中...');
            
            // 发送请求到服务器
            $.ajax({
                url: '/api/toggle_relay',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({device_id: deviceId, state: state}),
                success: function(response) {
                    if (response.success) {
                        // 更新状态显示
                        if (state) {
                            statusElement.html('<i class="fas fa-circle mr-1"></i>已开启').addClass('text-success').removeClass('text-secondary');
                        } else {
                            statusElement.html('<i class="fas fa-circle mr-1"></i>已关闭').addClass('text-secondary').removeClass('text-success');
                        }
                        
                        // 显示成功提示
                        showNotification('success', `${deviceId}号设备已${state ? '开启' : '关闭'}`);
                    } else {
                        // 恢复开关状态
                        $(this).prop('checked', !state);
                        showNotification('error', '控制失败，请重试');
                    }
                },
                error: function() {
                    // 恢复开关状态
                    $(this).prop('checked', !state);
                    showNotification('error', '网络错误，请检查连接');
                }
            });
        });
        
        // 定时更新设备状态
        function updateDeviceStatus() {
            $.get('/api/get_status', function(data) {
                $('.device-toggle').each(function() {
                    const deviceId = $(this).data('device-id');
                    const currentState = $(this).prop('checked');
                    const newState = data.relays[deviceId - 1];
                    const statusElement = $(this).closest('.device-card').find('.device-status span');
                    
                    // 如果状态有变化，更新UI
                    if (currentState !== newState) {
                        $(this).prop('checked', newState);
                        if (newState) {
                            statusElement.html('<i class="fas fa-circle mr-1"></i>已开启').addClass('text-success').removeClass('text-secondary');
                        } else {
                            statusElement.html('<i class="fas fa-circle mr-1"></i>已关闭').addClass('text-secondary').removeClass('text-success');
                        }
                    }
                });
            });
        }
        
        // 每5秒更新一次状态
        setInterval(updateDeviceStatus, 5000);
        
        // 显示通知
        function showNotification(type, message) {
            // 创建通知元素
            const notification = $('<div class="toast position-fixed bottom-5 end-5" role="alert" aria-live="assertive" aria-atomic="true"></div>');
            const bgColor = type === 'success' ? 'bg-success' : 'bg-danger';
            const icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
            
            notification.html(`
                <div class="toast-header ${bgColor} text-white">
                    <i class="fas fa-${icon} mr-2"></i>
                    <strong class="me-auto">通知</strong>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
                <div class="toast-body bg-white">${message}</div>
            `);
            
            // 添加到页面并显示
            $('body').append(notification);
            const toast = new bootstrap.Toast(notification);
            toast.show();
            
            // 3秒后自动关闭
            setTimeout(() => {
                toast.hide();
                setTimeout(() => {
                    notification.remove();
                }, 300);
            }, 3000);
        }
    </script>
</body>
</html>